<template>
  <div class="collection_details_area">
    <div class="collection_title">
      <div class="collection_title_left">收藏的商品</div>
      <div class="collection_title_right">更多收藏</div>
    </div>
    <div class="collection_details">
      <div class="collection_details_move">
        <a href="#" class="collection_details_left"></a>
        <a href="#" class="collection_details_right"></a>
      </div>
      <div class="collection_details_container">
        <ul class="collection_list">
          <li v-for="item in collectionInfo">
            <div>
              <a href="#"><img :src="item.imgUrl"/></a>
            </div>
            <div class="collection_productDetail"><a href="#">{{item.productDetail}}</a></div>
            <div class="collection_productPrice">￥{{item.price}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data:function(){
      return {
        collectionInfo:[
          {imgUrl:'../../../static/products/p_1.jpg',productDetail:'1111111111',price:32.5},
          {imgUrl:'../../../static/products/p_2.jpg',productDetail:'22222222',price:22.5},
          {imgUrl:'../../../static/products/p_3.jpg',productDetail:'3333333333',price:132.5},
          {imgUrl:'../../../static/products/p_4.jpg',productDetail:'444444',price:2232.5},
          {imgUrl:'../../../static/products/p_5.jpg',productDetail:'55555',price:3332.5},
          {imgUrl:'../../../static/products/p_6.jpg',productDetail:'66666',price:342.5}
        ]
      }
    }
  }
</script>

<style>
  .collection_details_area{
    width:980px;
    height:270px;
    float:right;
  }

  .collection_title{
    position:relative;
    height:30px;
    border-bottom:1px solid #ddd;
  }

  .collection_title_left{
    float:left;
    font-size:16px;
    line-height:30px;
    padding-left:10px;
  }

  .collection_title_right{
    float:right;
    font-size:12px;
    line-height:30px;
    padding-right:10px;
  }

  .collection_details{
    position:relative;
  }

  .collection_details_move{
    position:relative;
  }

  .collection_details_left{
    position:absolute;
    width:20px;
    height:20px;
    border-bottom:1px solid gray;
    border-left:1px solid gray;
    transform:rotate(45deg);
  }

  .collection_details_right{
    position:absolute;
    width:20px;
    height:20px;
    border-bottom:1px solid gray;
    border-right:1px solid gray;
    transform:rotate(-45deg);
  }

  .collection_details_container{
    position:relative;
    width:920px;
    overflow:hidden;
  }

  .collection_list{
    position:relative;
    left:10px;
    overflow:hidden;
    width:4000px;
  }

  .collection_list li{
    float:left;
    margin-left:20px;
  }

  .collection_list li img{
    width:160px;
    height:160px;
  }

  .collection_productDetail{
    font-size:14px;
  }

  .collection_productPrice{
    font-size:16px;
    color:red;
  }
</style>
